<template>
  <div>
      <h1>地图测试</h1>
       <div id="container">
           <el-amap
      ref="map"
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      mapStyle="amap://styles/darkblue"
      style="width:298px;height:250px"
    >
      <!--mapStyle:地图样式-->
      <!-- 地图中的标记点-->
      <el-amap-circle-marker
        v-for="(marker,index) in markers"
        :key="index"
        :center="marker.center"
        :radius="marker.radius"
        :fill-color="marker.fillColor"
        :fill-opacity="marker.fillOpacity"
        :events="marker.events"
      ></el-amap-circle-marker>
    </el-amap>
       </div>


  </div>
</template>

<script>
export default {
 data(){
     return{
         zoom: 18,//缩放
      center: [113.425613, 23.121912],//地图定位
      //标记点参数集合
      markers: [
        {
          center: [113.425613, 23.121912],//标点位置
          radius: 12,
          fillOpacity: 1,
          fillColor: "red",
          //标点点击事件
          events: {
            click: () => {
              console.log('Hello aMap')
            }
          }
        }
      ]
     }
 }
}
</script>

<style  scoped>
 #container{
    padding:0px;
    margin: 0px;
    width: 100%;
    height: 800px;
 }
</style>